<template>
  <div class="contacts-home">
    <child-head name="通讯录"></child-head>
    <div
      v-for="(item, index) in constList"
      :key="index"
      @click="getConstList(item)"
      class="chat-list"
    >
      <div class="photo">
        <img src="../../../assets/list/name.jpg" />
      </div>
      <div class="content">
        <div class="info-name">
          <span class="content_nickname">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <contacts-list :list="userData" />
  </div>
</template>

<script>
import { reactive } from "vue";
import ContactsList from "./contacts-list";
import { useRouter } from "vue-router";
import ChildHead from "../../../components/head-app/child-head";

export default {
  name: "contactsIndex",
  components: { ChildHead, ContactsList },
  setup() {
    const router = useRouter();
    // 联系人基本操作
    const constList = reactive([
      { name: "新的朋友", tel: "13333333331", path: "addcontacts" },
    ]);
    const getConstList = (item) => {
      router.push({
        name: item.path,
        params: {},
      });
    };

    //好友列表数据
    let userData = reactive([
      { name: "张三", tel: "13333333331" },
      { name: "李四", tel: "13333333331" },
      { name: "王五", tel: "13333333331" },
      { name: "龙六", tel: "13333333331" },
      { name: "孙七", tel: "13333333331" },
      { name: "周八", tel: "13333333331" },
      { name: "吴九", tel: "13333333331" },
      { name: "郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
      { name: "1郑十", tel: "13333333331" },
    ]);
    return {
      userData,
      constList,
      getConstList,
    };
  },
};
</script>
